<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts.js案例一</title>
    <script src="echarts.min.js"></script>
    <style type="text/css">
        .table{
            width: auto;
            height: 300px;
            position: relative;
            top: 20px;
        }
        #char{
            position: absolute;
            left: 0px;
            top: 0px;
        }
        #chart{
            position: absolute;
            top: 0px;
            left: 680px;
        }
        .til{
            position: relative;
            padding-top: 0px;
            margin-top: 0px;
        }
        #meta{
            position: absolute;
            right: 0px;
            top: 0px;
            text-align: right;

        }
    </style>

</head>
<body>
    <div class="til">
        <h1>Test Results Report</h1>
        <div id="meta">生成报告时间： 18:03 CST on 星期三 03 七月 2019
            <br/><span id="systemInfo">admin@DESKTOP-5QFNH77&nbsp;/&nbsp;Java 1.8.0_144 (Oracle Corporation)&nbsp;/&nbsp;Windows 10 10.0 (amd64)</span>
        </div>
    </div>


    <div class="table">
        <div id="char" style="width:600px;height:300px;"></div>
        <div id="chart" style="width:600px;height:300px;"></div>
    </div>


    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('char'));

        var weatherIcons = {
            'Sunny': './data/asset/img/weather/sunny_128.png',
            'Cloudy': './data/asset/img/weather/cloudy_128.png',
            'Showers': './data/asset/img/weather/showers_128.png'
        };

        option = {
            title: {
                text: '测试报告统计表',
                subtext: '自动生成的数据',
                left: 'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                // orient: 'vertical',
                // top: 'middle',
                bottom: 10,
                left: 'center',
                data: ['西凉', '益州','兖州','荆州','幽州']
            },
            series : [
                {
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data:[
                        {
                            value:1548,
                            name: '幽州',
                            label: {
                                normal: {
                                    formatter: [
                                        '{title|{b}}{abg|}',
                                        '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                                        '{hr|}',
                                        '  {Sunny|}{value|202}{rate|55.3%}',
                                        '  {Cloudy|}{value|142}{rate|38.9%}',
                                        '  {Showers|}{value|21}{rate|5.8%}'
                                    ].join('\n'),
                                    backgroundColor: '#eee',
                                    borderColor: '#777',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        title: {
                                            color: '#eee',
                                            align: 'center'
                                        },
                                        abg: {
                                            backgroundColor: '#333',
                                            width: '100%',
                                            align: 'right',
                                            height: 25,
                                            borderRadius: [4, 4, 0, 0]
                                        },
                                        Sunny: {
                                            height: 30,
                                            align: 'left',
                                            backgroundColor: {
                                                image: weatherIcons.Sunny
                                            }
                                        },
                                        Cloudy: {
                                            height: 30,
                                            align: 'left',
                                            backgroundColor: {
                                                image: weatherIcons.Cloudy
                                            }
                                        },
                                        Showers: {
                                            height: 30,
                                            align: 'left',
                                            backgroundColor: {
                                                image: weatherIcons.Showers
                                            }
                                        },
                                        weatherHead: {
                                            color: '#333',
                                            height: 24,
                                            align: 'left'
                                        },
                                        hr: {
                                            borderColor: '#777',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0
                                        },
                                        value: {
                                            width: 20,
                                            padding: [0, 20, 0, 30],
                                            align: 'left'
                                        },
                                        valueHead: {
                                            color: '#333',
                                            width: 20,
                                            padding: [0, 20, 0, 30],
                                            align: 'center'
                                        },
                                        rate: {
                                            width: 40,
                                            align: 'right',
                                            padding: [0, 10, 0, 0]
                                        },
                                        rateHead: {
                                            color: '#333',
                                            width: 40,
                                            align: 'center',
                                            padding: [0, 10, 0, 0]
                                        }
                                    }
                                }
                            }
                        },
                        {value:535, name: '荆州'},
                        {value:510, name: '兖州'},
                        {value:634, name: '益州'},
                        {value:735, name: '西凉'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('chart'));

    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
</script>

</body>
</html>